<template>
  <div>
    <catch-table
      ref="table"
      :api="api"
      :columns="columns"
      :operation="false"
      :search-form="[
        {
          type: 'input',
          label: '标题',
          name: 'title'
        },
        {
          type: 'tree',
          label: '分类',
          name: 'category_id',
          options: categories,
          props: { value: 'id', label: 'name' }
        }
      ]"
    >
      <template #operation>
        <router-link to="/cms/articles/create">
          <Add text="创建文章" />
        </router-link>
        <el-button-group class="ml-2">
          <el-button
            plain
            class="border-gray-200"
            @click="searchType(item.value)"
            v-for="item in [
              { label: '文章', value: 1 },
              { label: '单页', value: 2 }
            ]"
            :key="item.value"
            >{{ item.label }}</el-button
          >
        </el-button-group>
      </template>
      <template #_operate="scope">
        <router-link :to="'/cms/articles/create/' + scope.row.id">
          <Update />
        </router-link>
      </template>
    </catch-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import http from '@/support/http'

const api = 'cms/post'
const columns = [
  {
    type: 'selection'
  },
  {
    prop: 'id',
    label: 'ID',
    width: 100
  },
  {
    prop: 'title',
    label: '标题',
    width: 500
  },
  {
    prop: 'category',
    label: '分类'
  },
  {
    prop: 'creator',
    label: '作者',
    tags: true
  },
  {
    prop: 'status',
    label: '发布状态',
    switch: true
  },
  {
    prop: 'order',
    label: '排序',
    sortable: true
  },
  {
    prop: 'updated_at',
    label: '更新时间'
  },
  {
    type: 'operate',
    update: false
  }
]
const categories = ref()
http.get('cms/category').then(r => {
  categories.value = r.data.data
})

const table = ref()
const searchType = (val: number) => {
  table.value.doSearch({
    type: val
  })
}
</script>
